<template>
	<view>
		<view class="wrap">
			<!-- <u-form-item :leftIconStyle="{color: '#888', fontSize: '32rpx'}" left-icon="account" label-width="120" :label-position="labelPosition" label="姓名" prop="name">
				<u-input :border="border" placeholder="请输入姓名" v-model="model.name" type="text"></u-input>
			</u-form-item> -->
			<view class="u-tabs-box">
				<u-tabs-swiper activeColor="#2979ff" ref="tabs" :list="list" :current="current" @change="change"
					:is-scroll="false" swiperWidth="750"></u-tabs-swiper>
			</view>
			<swiper class="swiper-box" :current="swiperCurrent" @transition="transition" @change="swiperChange"
				@animationfinish="animationfinish">
				<swiper-item class="swiper-item" v-for="(t,index0) in list" :key="index0">
					<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
						<view class="page-box">
							<view class="order" v-for="(res, index) in orderList[current]" :key="res.id"
								style="margin-bottom: 20rpx;">
								<view @click="toDetail(res.id)">
									<view style="display: flex;align-items: center;justify-content: space-between;">
										<view style="font-size: 32rpx;">联单号：{{res.tranOrderCode}}</view>
										<view v-if="res.jointOrderStatus==sysConstant.PRE_ORDER_STATUS"
											style="color: red;">待转运</view>
										<view v-if="res.jointOrderStatus==sysConstant.ING_ORDER_STATUS"
											style="color: #ff9900;">转运中</view>
										<view v-if="res.jointOrderStatus==sysConstant.END_ORDER_STATUS"
											style="color: green;">已完成</view>
										<view v-if="res.jointOrderStatus==sysConstant.CANCEL_ORDER_STATUS"
											style="color: #999;">已取消</view>
									</view>
									<view style="margin-top: 20rpx;color: #999;">
										{{res.soilFieldName}}
									</view>
									<view style="color: #999;margin: 20rpx 0;">
										运输量：{{res.removalQuantity}} 吨
									</view>
									<view style="color: #999;">
										转运时间：{{res.startTime}}
									</view>
									<view style="color: #999;margin-top: 20rpx;">
										完成时间：2023-12-15 14:30
									</view>
								</view>
								<view style="margin-top: 30rpx;">
									<view style="display: flex;align-items: center;justify-content: flex-end;">
										<view>
											<u-button type="info" size="mini"
												v-if="res.jointOrderStatus==sysConstant.PRE_ORDER_STATUS||res.jointOrderStatus==sysConstant.ING_ORDER_STATUS"
												@click.stop="cancelOrder(res.id)">取消运输</u-button>
										</view>
										<!-- <view>
											<u-button type="info" size="mini"
												@click="cancelOrder(res.id)">删除记录</u-button>
										</view> -->
										<view style="margin-left: 20rpx;"
											v-if="res.jointOrderStatus==sysConstant.PRE_ORDER_STATUS">
											<u-button type="primary" size="mini"
												@click.stop="startOrder(res.id)">开始运输</u-button>
										</view>
										<view style="margin-left: 20rpx;">
											<u-button type="primary" size="mini"
												v-if="res.jointOrderStatus==sysConstant.ING_ORDER_STATUS"
												@click.stop="toxc(res)">处置卸车</u-button>
										</view>
									</view>
								</view>
							</view>
							<view style="margin-top: 30rpx;">
								<u-loadmore :status="loadStatus[0]" bgColor="#f8f8f8"></u-loadmore>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderList: [
					[],
					[],
					[],
					[]
				],
				list: [{
						name: '待转运'
					},
					{
						name: '转运中'
					},
					{
						name: '已完成'
					},
					{
						name: '已取消',
					}
				],
				current: 0,
				swiperCurrent: 0,
				tabsHeight: 0,
				dx: 0,
				loadStatus: ['loadmore', 'loadmore', 'loadmore', 'loadmore'],

				pageNum: 1,
				pageSize: 5,
				jointOrderStatus: 0,
				sysConstant: this.sysConstant,

				orderNumList: [0, 0, 0, 0]

			};
		},
		onLoad() {
			// this.getOrderList(0)
		},
		onShow() {
			console.log("qqqqqqqqqqqqq")
			this.flushGetOrderList(this.current)
		},
		methods: {
			reachBottom() {
				// 此tab为空数据
				if (this.orderList[this.current].length < this.orderNumList[this.current]) {
					this.loadStatus.splice(this.current, 1, "loading")
					this.pageNum += 1
					this.getOrderList(this.current);
				}
			},
			// 页面数据
			getOrderList(idx) {
				uni.showLoading({

				})
				let index = idx
				if (index == 0) {
					this.jointOrderStatus = this.sysConstant.PRE_ORDER_STATUS
				}
				if (index == 1) {
					this.jointOrderStatus = this.sysConstant.ING_ORDER_STATUS
				}
				if (index == 2) {
					this.jointOrderStatus = this.sysConstant.END_ORDER_STATUS
				}
				if (index == 3) {
					this.jointOrderStatus = this.sysConstant.CANCEL_ORDER_STATUS
				}
				this.$u.get(`/driver/wasteTransportationOrderPage?pageNum=${this.pageNum}&pageSize=${this.pageSize}`, {
					jointOrderStatus: this.jointOrderStatus
				}).then(rex => {
					if (rex.code == 200) {
						let a = rex.rows
						for (let i = 0; i < a.length; i++) {
							this.orderList[idx].push(a[i]);
						}
						this.$forceUpdate()
						console.log(this.orderList[idx])
						this.orderNumList[idx] = rex.total
						uni.hideLoading()
					}
				})
				this.loadStatus.splice(this.current, 1, "loadmore")
			},
			// getOrderList(idx) {
			// 	for(let i = 0; i < 5; i++) {
			// 		let index = this.$u.random(0, this.dataList.length - 1);
			// 		let data = JSON.parse(JSON.stringify(this.dataList[index]));
			// 		data.id = this.$u.guid();
			// 		this.orderList[idx].push(data);
			// 	}
			// 	this.loadStatus.splice(this.current,1,"loadmore")
			// },

			toDetail(orderId) {
				console.log(orderId)
				uni.navigateTo({
					url: "/pages/order/detail/detail?id=" + orderId
				})
			},

			cancelOrder(orderId) {
				uni.showModal({
					title: '提示',
					content: '确认取消运输',
					success: (res) => {
						if (res.confirm) {
							console.log('用户点击确定');
							this.$u.post("/driver/changeOrder", {
								'id': orderId,
								'jointOrderStatus': this.sysConstant.CANCEL_ORDER_STATUS
							}).then(res => {
								// this.current = 3
								this.flushGetOrderList(this.current)
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},

			startOrder(orderId) {
				this.$u.post("/driver/changeOrder", {
					'id': orderId,
					'jointOrderStatus': this.sysConstant.ING_ORDER_STATUS
				}).then(res => {
					// this.current = 1
					this.flushGetOrderList(this.current)
				})
			},

			flushGetOrderList(index) {
				this.pageNum = 1
				this.orderList[index] = []
				
				this.getOrderList(index)
			},

			toxc(order) {
				let that = this
				uni.scanCode({
					success: function(res) {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
						uni.navigateTo({
							url: "/pages/order/xc/xc?orderId=" + order.id + "&soilSiteCompanyId=" + res
								.result + "&receivingQuantity=" + order.removalQuantity
						})
					}
				});
			},
			// tab栏切换
			change(index) {
				console.log(index);
				this.swiperCurrent = index;
			},
			// swiper
			swiperChange(e) {
				console.log("aaaaaaa")
				let index = e.detail.current
				
				console.log(index)
				this.flushGetOrderList(index);
			},
			transition({
				detail: {
					dx
				}
			}) {
				this.$refs.tabs.setDx(dx);
			},
			animationfinish({
				detail: {
					current
				}
			}) {
				this.$refs.tabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			}
		}
	};
</script>

<style>
	/* #ifndef H5 */
	page {
		height: 100%;
	}

	/* #endif */
</style>

<style lang="scss" scoped>
	.order {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 20rpx;
	}

	.wrap {
		display: flex;
		flex-direction: column;
		height: calc(100vh - var(--window-top));
		width: 100%;
	}

	.swiper-box {
		flex: 1;
	}

	.swiper-item {
		height: 100%;
	}

	.page-box {
		padding: 30rpx;
	}
</style>